<template>
  <div
    class="layout-container"
    :style="{
      background: background,
      paddingLeft: p + 'vw',
      paddingRight: p + 'vw',
      paddingTop: verticalPadding + 'px',
      paddingBottom: verticalPadding + 'px',
    }"
  >
    <div class="left">
      <slot name="left"></slot>
    </div>
    <div class="right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    background: {
      type: String,
      default: "white",
    },
    p: {
      default: 6,
    },
    verticalPadding: {
      type: Number,
      default: 40,
    }
  },
};
</script>

<style lang="scss" scoped>
.layout-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .left,
  .right {
    width: 48%;
  }
}
</style>
